<!-- 任务进度分析 -->
<template>
  <div class="progress">
    <div><span style="font-size: 20px">统计项：</span><span>数量</span></div>
    <div id="chart" style="width: 100%;height:200px"></div>
    <div style="margin-top: 20px;">
      <el-table :data="tableData" height="150" border :header-cell-style="{backgroundColor: '#e7f6f3'}" @row-click="onClick"
                style="width: 100%" >
        <el-table-column prop="projectName" label="项目名称"></el-table-column>
        <el-table-column prop="todo" label="待办" width="120"></el-table-column>
        <el-table-column prop="doing" label="进行中" width="120"></el-table-column>
        <el-table-column prop="dong" label="完成" width="120"></el-table-column>
        <el-table-column prop="suspend" label="暂停" width="120"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: 'progressCard',
  data() {
    return {
      processChart: undefined,
      data: {
        ydata: ['风光一体化防沙治沙', '三北六期', '蚂蚁森林', '蓝旗机器人造林'],
        legend: ['暂停', '完成', '进行中', '待办',],
        barData: [
          {
            name: '暂停',
            data: [7, 3, 9, 5],
          },
          {
            name: '完成',
            data: [4, 8, 6, 5],
          },
          {
            name: '进行中',
            data: [5, 2, 2, 1],
          },
          {
            name: '待办',
            data: [5, 5, 5, 3],
          }
        ]
      },
      tableData: [
        {
          projectName: '风光一体化防沙治沙',
          todo: '19',
          doing: '',
          dong: '10',
          suspend: ''
        }, {
          projectName: '三北六期',
          todo: '19',
          doing: '',
          dong: '10',
          suspend: ''
        }, {
          projectName: '蚂蚁森林',
          todo: '19',
          doing: '',
          dong: '10',
          suspend: ''
        }, {
          projectName: '蓝旗机器人造林',
          todo: '19',
          doing: '',
          dong: '10',
          suspend: ''
        }
      ],
      jdfxColumn:[
        { prop: 'status', label: '任务状态', align: 'center',fixed:'left'},
        { prop: 'xmmc', label: '项目名称', align: 'center'},
        { prop: 'fylx', label: '数量', align: 'center'},
      ],
      jdfxData:[]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart() {
      const ctx = document.getElementById('chart')
      this.processChart = echarts.init(ctx)
      let serData = [];
      this.data.barData.forEach((item) => {
        serData.push({
          name: item.name,
          type: 'bar',
          stack: 'all',
          barWidth: 12,
          data: item.data,
          showBackground: true,
          backgroundStyle: {
            color: '#f5f5f5'
          },
        })
      })
      let option = {
        backgroundColor: "#fff",
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: (params) => {
            let arr = [...params];
            let str = '';
            arr.forEach((item) => {
              str += item.marker + item.seriesName + '  ' + item.data + '<br />';
            });
            str = arr[0].name + '<br />' + str;
            return str;
          },
        },
        color: [
          '#159AFF',
          '#66E1DF',
          '#66E193',
          '#E3F170',
          '#FFAD6A',
          '#9A70FD',
          '#ffe0ab',
          '#6bc5f4',
          '#c08ef2',
          '#ffda49'
        ],
        //图表选择栏
        legend: {
          icon: 'circle',
          top: '5%',
          left: 'center',
          orient: 'horizontal', //图例方向【horizontal/vertical】
          itemHeight: 18, //修改icon图形大小
          itemWidth: 18, //修改icon图形大小
          selectedMode: false, //不允许点击图例
          itemGap: 30,
          textStyle: {
            fontSize: 14,
            color: 'black',
          },
          data: this.data.legend,
        },
        //图标离容器的距离
        grid: {
          left: '5%',
          right: '3%',
          bottom: '10%',
          top: '20%',
          //是否包含坐标轴
          containLabel: true,
        },
        //x坐标轴
        xAxis: [
          {
            type: 'value',
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'black'
              }
            },
            boundaryGap: true,
            axisLine: {
              show: true,
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: '#5d85a0',
                width: 1,
                type: 'solid',
              },
            },
            axisLabel: {
              color: 'black',
              fontSize: 12,
            },
          },
        ],
        //y坐标轴
        yAxis: [
          {
            type: 'category',
            name: '',
            data: this.data.ydata,
            splitLine: {
              show: false,
            },
            // inverse: true,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: '#5d85a0',
                width: 1,
                type: 'solid',
              },
            },
            axisLabel: {
              textStyle: {
                color: 'black',
                fontSize: 12,
              },
            },
          },
        ],
        // 数据展示区域
        series: serData
      };
      this.processChart.setOption(option)
    },
    onClick(value){
      let param = {
        value: 'jdfx',
        name:'数量',
        row: value,
        columns: this.jdfxColumn,
        tableData: this.jdfxData,
        showButton: false,
        showQuery: false
      }
      this.$emit('showTables',param)
    }
  }
}
</script>

<style lang="scss" scoped>
.progress{
  margin: 20px;
}
</style>
